{% extends "billing/layout.html" %}
{% block title %}
    Daily
{% endblock %}
{% load static %}
{% block headlink %}
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
<link href="{% static 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>每日使用量</h1>
</div>

<form class="form-horizontal">
    <fieldset>
        <legend>筛选订阅和起止时间</legend>
        {% if sub_list %}
        <div class="form-group">
            <label for="select_sub" class="col-md-2 control-label">选择订阅</label>
            <div class="col-md-5">
                <select name="subid" id="select_sub" class="form-control">
                    <option value="" >全部</option>
                    {% for sub in sub_list %}
                        <option value="{{ sub.id }}">{{ sub.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        {% endif %}
        <div class="form-group">
            <label for="dtp_input_start" class="col-md-2 control-label">起始时间</label>
            <div class="col-md-5">
                <div id="datepicker_start" class="input-group date" data-link-field="dtp_input_start" data-link-format="yyyy-mm-dd">
                    <input type="text" class="form-control" value="" readonly />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
            </div>
            <input name="start_date" type="hidden" id="dtp_input_start" value="" /><br/>
        </div>
        <div class="form-group">
            <label for="dtp_input_end" class="col-sm-2 control-label">截止时间</label>
            <div class="col-md-5">
                <div id="datepicker_end" class="input-group date" data-link-field="dtp_input_end" data-link-format="yyyy-mm-dd">
                    <input type="text" class="form-control" value="" readonly />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
            </div>
            <input name="end_date" type="hidden" id="dtp_input_end" value="" /><br/>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-5">
                <button type="submit" class="btn btn-primary">刷新</button>
            </div>
        </div>
    </fieldset>
</form>

<div id="bar" style="width:1000px; height:600px;"></div>
{% endblock %}

{% block script %}
<script src="{% static 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.js' %}" charset="UTF-8"></script>
<script src="{% static 'bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}" charset="UTF-8"></script>
<script type="text/javascript" src="{% static 'echarts/themes/essos.js' %}"></script>
<script>
    var chart = echarts.init(document.getElementById('bar'), 'essos', {renderer: 'canvas'});

    $(function () {
        datePicker();
        fetchData();
    });

    // form表单提交AJAX请求
    $('form:first').submit(function () {
        var formdate = $(this).serialize();  // 获取表单数据
        fetchData(formdate);
        return false;  // 阻止表单的默认提交行为
    });

    function datePicker() {
        datetimepicker_options = {
            language: 'zh-CN',
            todayBtn:  true,
            todayHighlight: true,
            weekStart: 1,
            startView: 2,
            minView: 2,
            format: 'yyyy-mm-dd',
        };
        $('#datepicker_start')
            .datetimepicker(datetimepicker_options)
            .on('changeDate', function(ev) {
                $(this).datetimepicker('hide');
            });
        $('#datepicker_end')
            .datetimepicker(datetimepicker_options)
            .on('changeDate', function(ev) {
                $(this).datetimepicker('hide');
            });
    }

    function fetchData(formdate) {
        $.ajax({
            type: "GET",
            url: "{% url 'billing:cost_daily_picker' %}",
            dataType: 'json',
            data: formdate,
            success: function (result) {
                chart.clear();
                chart.setOption(result.data);
            }
        });
    }
</script>
{% endblock %}